<!--<template>-->
<!--  <el-container>-->
<!--    <el-aside>-->
<!--      <Menu></Menu>-->
<!--    </el-aside>-->
<!--    <el-container>-->
<!--      <el-main>-->
<!--        <div id="cesiumContainer"></div>-->
<!--        <router-view></router-view>-->
<!--      </el-main>-->
<!--    </el-container>-->
<!--  </el-container>-->
<!--</template>-->
<!--<script setup>-->
<!--  import { onMounted } from 'vue'-->
<!--  import * as Cesium from 'cesium'-->
<!--  // import { getcameraInfo } from '@/utils/cesiumCtrl/getCameraInfo.js'-->

<!--  Cesium.Ion.defaultAccessToken =-->
<!--    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyMjBhMzcxMC0wNjBiLTRmYjItYjY1MC0wMzAwMzMyMGUyMmEiLCJpZCI6MzAzNzc3LCJpYXQiOjE3NDc2Mzk0NTV9.E_90aKtVdzRGlU2z48VwJ4mWvl-uuDkfQBCOO6zbzn4'-->

<!--  onMounted(() => {-->
<!--    init()-->
<!--  })-->
<!--  const init = () => {-->
<!--    const viewer = new Cesium.Viewer('cesiumContainer', {-->
<!--      infoBox: false,-->
<!--      // timeline: false, // 是否显示时间线控件-->
<!--      // imageryProvider: new Cesium.ArcGisMapServerImageryProvider({-->
<!--      //   url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",-->
<!--      // }),-->
<!--      //此处使用CesiumTerrainProviderEdit替换原来的CesiumTerrainProvider类，实现指定区域地形压平处理-->
<!--      // terrainProvider: new CesiumTerrainProviderEdit({-->
<!--      //   url: "http://data.marsgis.cn/terrain",-->
<!--      // }),-->
<!--      // terrain: Cesium.Terrain.fromWorldTerrain({-->
<!--      //   requestVertexNormals: true, //Needed to visualize slope-->
<!--      // }),-->
<!--      // 指定上下文-->
<!--      // contextOptions: {-->
<!--      //   requestWebgl1: true,-->
<!--      // },-->
<!--      baseLayer: Cesium.ImageryLayer.fromProviderAsync(-->
<!--        Cesium.ArcGisMapServerImageryProvider.fromBasemapType(Cesium.ArcGisBaseMapType.SATELLITE)-->
<!--      )-->
<!--    })-->

<!--    // 不显示底图-->
<!--    // viewer.imageryLayers.get(0).show = false;-->
<!--    // 去除logo-->
<!--    viewer.cesiumWidget.creditContainer.style.display = 'none'-->
<!--    // 显示帧率-->
<!--    viewer.scene.debugShowFramesPerSecond = true-->
<!--    viewer.scene.globe.depthTestAgainstTerrain = true-->
<!--    // 外天空盒-->
<!--    viewer.scene.skyBox = new Cesium.SkyBox({-->
<!--      sources: {-->
<!--        positiveX: '/images/Standard-Cube-Map/px1.png',-->
<!--        negativeX: '/images/Standard-Cube-Map/nx1.png',-->
<!--        positiveY: '/images/Standard-Cube-Map/pz.png',-->
<!--        negativeY: '/images/Standard-Cube-Map/nz1.png',-->
<!--        positiveZ: '/images/Standard-Cube-Map/py.png',-->
<!--        negativeZ: '/images/Standard-Cube-Map/ny1.png'-->
<!--      }-->
<!--    })-->

<!--    // 调试使用-->
<!--    window.viewer = viewer-->

<!--    // 监听点击事件，拾取坐标-->
<!--    const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)-->
<!--    handler.setInputAction((e) => {-->
<!--      const clickPosition = viewer.scene.camera.pickEllipsoid(e.position)-->
<!--      const randiansPos = Cesium.Cartographic.fromCartesian(clickPosition)-->
<!--      console.log(-->
<!--        '经度：' +-->
<!--          Cesium.Math.toDegrees(randiansPos.longitude) +-->
<!--          ', 纬度：' +-->
<!--          Cesium.Math.toDegrees(randiansPos.latitude)-->
<!--      )-->
<!--    }, Cesium.ScreenSpaceEventType.LEFT_CLICK)-->

<!--    window.__getCameraInfo = () => getcameraInfo(viewer)-->
<!--  }-->
<!--</script>-->
<!--<style scoped>-->
<!--  #cesiumContainer {-->
<!--    position: absolute;-->
<!--    top: 0;-->
<!--    bottom: 0;-->
<!--    left: 0;-->
<!--    right: 0;-->
<!--  }-->

<!--  .el-header {-->
<!--    height: 30px;-->
<!--  }-->

<!--  .el-container {-->
<!--    height: 100vh;-->
<!--  }-->

<!--  .el-main {-->
<!--    padding: 0 !important;-->
<!--    position: relative;-->
<!--  }-->

<!--  .el-aside {-->
<!--    width: auto;-->
<!--  }-->
<!--</style>-->
<!--大屏数据布局-->
<template>

<!-- 网格布局 -->
<div id="gridLayoutView" class="container mx-auto p-4 md:p-6 lg:p-8 hidden">
<div class="title-bar text-xl border-b border-primary/30 pb-4 mb-6">
  <h1>网格布局示例</h1>
  <span class="text-xs bg-primary/20 text-primary px-2 py-1 rounded">3×3网格结构</span>
</div>

<!-- 3×3网格布局 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6">
  <!-- 第一行 -->
  <div class="module-box col-span-1">
    <div class="title-bar">
      <span><i class="fa fa-line-chart mr-2 text-secondary"></i>实时访问量</span>
      <span class="text-xs text-gray-400">更新于 10:23</span>
    </div>
    <div class="data-value">24,589</div>
    <div class="mt-2 text-sm text-green-400"><i class="fa fa-arrow-up"></i> 12.5%</div>
  </div>

  <div class="module-box col-span-1">
    <div class="title-bar">
      <span><i class="fa fa-shopping-cart mr-2 text-secondary"></i>订单总量</span>
      <span class="text-xs text-gray-400">今日数据</span>
    </div>
    <div class="data-value">1,284</div>
    <div class="mt-2 text-sm text-green-400"><i class="fa fa-arrow-up"></i> 8.2%</div>
  </div>

  <div class="module-box col-span-1">
    <div class="title-bar">
      <span><i class="fa fa-user mr-2 text-secondary"></i>活跃用户</span>
      <span class="text-xs text-gray-400">当前在线</span>
    </div>
    <div class="data-value">8,752</div>
    <div class="mt-2 text-sm text-red-400"><i class="fa fa-arrow-down"></i> 3.1%</div>
  </div>

  <!-- 第二行 -->
  <div class="module-box col-span-1">
    <div class="title-bar">
      <span><i class="fa fa-area-chart mr-2 text-secondary"></i>销售趋势</span>
      <span class="text-xs text-gray-400">近7天</span>
    </div>
    <div class="h-40 bg-dark/40 rounded flex items-center justify-center">
      <i class="fa fa-bar-chart text-4xl text-gray-500"></i>
    </div>
  </div>

  <div class="module-box col-span-1 md:col-span-2 lg:col-span-2">
    <div class="title-bar">
      <span><i class="fa fa-map-marker mr-2 text-secondary"></i>区域分布</span>
      <span class="text-xs text-gray-400">全国数据</span>
    </div>
    <div class="h-40 bg-dark/40 rounded flex items-center justify-center">
      <i class="fa fa-map text-4xl text-gray-500"></i>
    </div>
  </div>

  <!-- 第三行 -->
  <div class="module-box col-span-1 md:col-span-2 lg:col-span-2">
    <div class="title-bar">
      <span><i class="fa fa-clock-o mr-2 text-secondary"></i>实时监控</span>
      <span class="text-xs text-gray-400">生产线A</span>
    </div>
    <div class="h-40 bg-dark/40 rounded flex items-center justify-center">
      <i class="fa fa-video-camera text-4xl text-gray-500"></i>
    </div>
  </div>

  <div class="module-box col-span-1">
    <div class="title-bar">
      <span><i class="fa fa-bell mr-2 text-secondary"></i>告警信息</span>
      <span class="text-xs text-red-400">3条未处理</span>
    </div>
    <div class="h-40 overflow-y-auto bg-dark/40 rounded p-2">
      <div class="text-sm border-b border-gray-700 pb-2 mb-2">
        <span class="text-red-400">●</span> 设备123温度过高
      </div>
      <div class="text-sm border-b border-gray-700 pb-2 mb-2">
        <span class="text-red-400">●</span> 网络延迟增加
      </div>
      <div class="text-sm">
        <span class="text-yellow-400">●</span> 磁盘空间不足
      </div>
    </div>
  </div>
</div>
</div>

<!-- 环绕布局 -->
<div id="surroundLayoutView" class="container mx-auto p-4 md:p-6 lg:p-8 hidden">
<div class="title-bar text-xl border-b border-primary/30 pb-4 mb-6">
  <h1>环绕布局示例</h1>
  <span class="text-xs bg-primary/20 text-primary px-2 py-1 rounded">中心+四周环绕结构</span>
</div>

<!-- 中心区域 -->
<div class="module-box mb-6">
  <div class="title-bar">
    <span><i class="fa fa-map mr-2 text-secondary"></i>核心地图监控</span>
    <span class="text-xs text-gray-400">实时更新</span>
  </div>
  <div class="h-[400px] bg-dark/40 rounded flex items-center justify-center">
    <i class="fa fa-map-o text-5xl text-gray-500"></i>
  </div>
</div>

<!-- 四周环绕区域 -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
  <div class="module-box">
    <div class="title-bar">
      <span><i class="fa fa-car mr-2 text-secondary"></i>车辆总数</span>
    </div>
    <div class="data-value">1,284</div>
  </div>

  <div class="module-box">
    <div class="title-bar">
      <span><i class="fa fa-road mr-2 text-secondary"></i>道路状况</span>
    </div>
    <div class="data-value">87% 畅通</div>
  </div>

  <div class="module-box">
    <div class="title-bar">
      <span><i class="fa fa-signal mr-2 text-secondary"></i>信号强度</span>
    </div>
    <div class="data-value">96%</div>
  </div>

  <div class="module-box">
    <div class="title-bar">
      <span><i class="fa fa-users mr-2 text-secondary"></i>人流密度</span>
    </div>
    <div class="data-value">中</div>
  </div>
</div>

<!-- 底部信息区域 -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
  <div class="module-box">
    <div class="title-bar">
      <span><i class="fa fa-line-chart mr-2 text-secondary"></i>流量趋势</span>
    </div>
    <div class="h-32 bg-dark/40 rounded flex items-center justify-center">
      <i class="fa fa-area-chart text-3xl text-gray-500"></i>
    </div>
  </div>

  <div class="module-box">
    <div class="title-bar">
      <span><i class="fa fa-exclamation-triangle mr-2 text-secondary"></i>异常事件</span>
    </div>
    <div class="h-32 overflow-y-auto bg-dark/40 rounded p-2">
      <div class="text-sm border-b border-gray-700 pb-2 mb-2">
        <span class="text-red-400">●</span> 交通事故 ×3
      </div>
      <div class="text-sm">
        <span class="text-yellow-400">●</span> 道路施工 ×2
      </div>
    </div>
  </div>
</div>
</div>

<!-- 分区布局 -->
<div id="partitionLayoutView" class="container mx-auto p-4 md:p-6 lg:p-8 hidden">
<div class="title-bar text-xl border-b border-primary/30 pb-4 mb-6">
  <h1>分区布局示例</h1>
  <span class="text-xs bg-primary/20 text-primary px-2 py-1 rounded">核心区+辅助区结构</span>
</div>

<div class="grid grid-cols-1 lg:grid-cols-4 gap-4">
  <!-- 左侧边栏 -->
  <div class="lg:col-span-1 flex flex-col gap-4">
    <div class="module-box flex-1">
      <div class="title-bar">
        <span><i class="fa fa-tachometer mr-2 text-secondary"></i>核心指标</span>
      </div>
      <div class="space-y-6 mt-4">
        <div>
          <div class="text-sm text-gray-400">总访问量</div>
          <div class="data-value">128,547</div>
        </div>
        <div>
          <div class="text-sm text-gray-400">转化率</div>
          <div class="data-value">23.6%</div>
        </div>
        <div>
          <div class="text-sm text-gray-400">平均时长</div>
          <div class="data-value">8:42</div>
        </div>
      </div>
    </div>

    <div class="module-box flex-1">
      <div class="title-bar">
        <span><i class="fa fa-user-circle mr-2 text-secondary"></i>用户分布</span>
      </div>
      <div class="h-48 bg-dark/40 rounded mt-2 flex items-center justify-center">
        <i class="fa fa-pie-chart text-3xl text-gray-500"></i>
      </div>
    </div>
  </div>

  <!-- 右侧主内容区 -->
  <div class="lg:col-span-3 flex flex-col gap-4">
    <div class="module-box">
      <div class="title-bar">
        <span><i class="fa fa-bar-chart mr-2 text-secondary"></i>业务趋势分析</span>
        <div class="flex gap-2">
          <button class="text-xs bg-primary/20 text-primary px-2 py-0.5 rounded">日</button>
          <button class="text-xs bg-dark text-gray-400 px-2 py-0.5 rounded">周</button>
          <button class="text-xs bg-dark text-gray-400 px-2 py-0.5 rounded">月</button>
        </div>
      </div>
      <div class="h-64 bg-dark/40 rounded mt-2 flex items-center justify-center">
        <i class="fa fa-line-chart text-4xl text-gray-500"></i>
      </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
      <div class="module-box">
        <div class="title-bar">
          <span><i class="fa fa-list-alt mr-2 text-secondary"></i>热门产品</span>
        </div>
        <div class="h-40 overflow-y-auto bg-dark/40 rounded mt-2 p-2">
          <div class="flex justify-between items-center border-b border-gray-700 pb-2 mb-2">
            <span>产品A</span>
            <span class="text-green-400">+12.5%</span>
          </div>
          <div class="flex justify-between items-center border-b border-gray-700 pb-2 mb-2">
            <span>产品B</span>
            <span class="text-green-400">+8.3%</span>
          </div>
          <div class="flex justify-between items-center border-b border-gray-700 pb-2 mb-2">
            <span>产品C</span>
            <span class="text-red-400">-2.1%</span>
          </div>
          <div class="flex justify-between items-center">
            <span>产品D</span>
            <span class="text-green-400">+5.7%</span>
          </div>
        </div>
      </div>

      <div class="module-box">
        <div class="title-bar">
          <span><i class="fa fa-comments mr-2 text-secondary"></i>实时反馈</span>
        </div>
        <div class="h-40 overflow-y-auto bg-dark/40 rounded mt-2 p-2">
          <div class="text-sm border-b border-gray-700 pb-2 mb-2">
            <span class="text-primary">用户123:</span> 产品体验很好
          </div>
          <div class="text-sm border-b border-gray-700 pb-2 mb-2">
            <span class="text-primary">用户456:</span> 希望增加新功能
          </div>
          <div class="text-sm">
            <span class="text-primary">用户789:</span> 已购买，期待发货
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</div>

<!-- 三列布局 (左中右) -->
<div id="threeColumnLayoutView" class="container mx-auto p-4 md:p-6 lg:p-8">
<div class="title-bar text-xl border-b border-primary/30 pb-4 mb-6">
  <h1>三列布局示例</h1>
  <span class="text-xs bg-primary/20 text-primary px-2 py-1 rounded">左中右结构</span>
</div>

<!-- 左中右三列布局 -->
<div class="grid grid-cols-1 lg:grid-cols-12 gap-6 h-[calc(100vh-120px)]">
  <!-- 左侧列 - 占比 2/12 -->
  <div class="lg:col-span-2 flex flex-col gap-6">
    <div class="module-box flex-1">
      <div class="title-bar">
        <span><i class="fa fa-filter mr-2 text-secondary"></i>筛选条件</span>
      </div>
      <div class="space-y-4 mt-2">
        <div>
          <label class="text-xs text-gray-400 block mb-1">时间范围</label>
          <select class="w-full bg-dark border border-primary/30 rounded px-2 py-1 text-sm">
            <option>今日</option>
            <option>昨日</option>
            <option>近7天</option>
            <option>本月</option>
          </select>
        </div>
        <div>
          <label class="text-xs text-gray-400 block mb-1">区域</label>
          <select class="w-full bg-dark border border-primary/30 rounded px-2 py-1 text-sm">
            <option>全国</option>
            <option>华北</option>
            <option>华东</option>
            <option>华南</option>
          </select>
        </div>
        <div>
          <label class="text-xs text-gray-400 block mb-1">状态</label>
          <div class="space-y-2">
            <label class="flex items-center text-sm">
              <input type="checkbox" checked class="mr-2 accent-primary"> 正常
            </label>
            <label class="flex items-center text-sm">
              <input type="checkbox" checked class="mr-2 accent-primary"> 警告
            </label>
            <label class="flex items-center text-sm">
              <input type="checkbox" checked class="mr-2 accent-primary"> 异常
            </label>
          </div>
        </div>
        <button class="w-full bg-primary text-white rounded py-1.5 text-sm mt-4">
          应用筛选
        </button>
      </div>
    </div>

    <div class="module-box flex-1">
      <div class="title-bar">
        <span><i class="fa fa-info-circle mr-2 text-secondary"></i>系统状态</span>
      </div>
      <div class="space-y-4 mt-4">
        <div class="flex justify-between items-center">
          <span class="text-sm">CPU使用率</span>
          <span class="text-sm text-green-400">32%</span>
        </div>
        <div class="w-full bg-dark rounded-full h-1.5">
          <div class="bg-green-500 h-1.5 rounded-full" style="width: 32%"></div>
        </div>

        <div class="flex justify-between items-center">
          <span class="text-sm">内存占用</span>
          <span class="text-sm text-yellow-400">68%</span>
        </div>
        <div class="w-full bg-dark rounded-full h-1.5">
          <div class="bg-yellow-500 h-1.5 rounded-full" style="width: 68%"></div>
        </div>

        <div class="flex justify-between items-center">
          <span class="text-sm">磁盘空间</span>
          <span class="text-sm text-green-400">45%</span>
        </div>
        <div class="w-full bg-dark rounded-full h-1.5">
          <div class="bg-green-500 h-1.5 rounded-full" style="width: 45%"></div>
        </div>

        <div class="flex justify-between items-center">
          <span class="text-sm">网络带宽</span>
          <span class="text-sm text-green-400">27%</span>
        </div>
        <div class="w-full bg-dark rounded-full h-1.5">
          <div class="bg-green-500 h-1.5 rounded-full" style="width: 27%"></div>
        </div>
      </div>
    </div>
  </div>

  <!-- 中间列 - 占比 7/12 (核心内容区) -->
  <div class="lg:col-span-7 flex flex-col gap-6">
    <div class="module-box">
      <div class="title-bar">
        <span><i class="fa fa-dashboard mr-2 text-secondary"></i>核心数据总览</span>
        <span class="text-xs text-gray-400">实时更新</span>
      </div>
      <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mt-2">
        <div class="bg-dark/40 rounded p-3">
          <div class="text-xs text-gray-400">总交易量</div>
          <div class="text-xl font-bold mt-1">¥28,547,912</div>
          <div class="text-xs text-green-400 mt-1"><i class="fa fa-arrow-up"></i> 5.2%</div>
        </div>
        <div class="bg-dark/40 rounded p-3">
          <div class="text-xs text-gray-400">活跃用户</div>
          <div class="text-xl font-bold mt-1">124,896</div>
          <div class="text-xs text-green-400 mt-1"><i class="fa fa-arrow-up"></i> 12.8%</div>
        </div>
        <div class="bg-dark/40 rounded p-3">
          <div class="text-xs text-gray-400">转化率</div>
          <div class="text-xl font-bold mt-1">18.4%</div>
          <div class="text-xs text-red-400 mt-1"><i class="fa fa-arrow-down"></i> 1.3%</div>
        </div>
        <div class="bg-dark/40 rounded p-3">
          <div class="text-xs text-gray-400">客单价</div>
          <div class="text-xl font-bold mt-1">¥268</div>
          <div class="text-xs text-green-400 mt-1"><i class="fa fa-arrow-up"></i> 3.7%</div>
        </div>
      </div>
    </div>

    <div class="module-box flex-1">
      <div class="title-bar">
        <span><i class="fa fa-line-chart mr-2 text-secondary"></i>业务趋势分析</span>
        <div class="flex gap-2">
          <button class="text-xs bg-primary/20 text-primary px-2 py-0.5 rounded">小时</button>
          <button class="text-xs bg-dark text-gray-400 px-2 py-0.5 rounded">日</button>
          <button class="text-xs bg-dark text-gray-400 px-2 py-0.5 rounded">周</button>
        </div>
      </div>
      <div class="h-[calc(100%-40px)] bg-dark/40 rounded flex items-center justify-center">
        <i class="fa fa-line-chart text-5xl text-gray-500"></i>
      </div>
    </div>

    <div class="module-box">
      <div class="title-bar">
        <span><i class="fa fa-map-marker mr-2 text-secondary"></i>区域分布热力图</span>
      </div>
      <div class="h-64 bg-dark/40 rounded flex items-center justify-center">
        <i class="fa fa-map text-4xl text-gray-500"></i>
      </div>
    </div>
  </div>

  <!-- 右侧列 - 占比 3/12 -->
  <div class="lg:col-span-3 flex flex-col gap-6">
    <div class="module-box">
      <div class="title-bar">
        <span><i class="fa fa-bell mr-2 text-secondary"></i>实时告警</span>
        <span class="text-xs text-red-400">5条新消息</span>
      </div>
      <div class="h-[200px] overflow-y-auto bg-dark/40 rounded p-3">
        <div class="mb-3 pb-3 border-b border-gray-700">
          <div class="flex justify-between">
            <span class="text-sm font-medium">服务器负载过高</span>
            <span class="text-xs text-gray-400">10:23</span>
          </div>
          <p class="text-xs text-gray-400 mt-1">服务器S-231 CPU使用率超过85%</p>
        </div>
        <div class="mb-3 pb-3 border-b border-gray-700">
          <div class="flex justify-between">
            <span class="text-sm font-medium">网络波动</span>
            <span class="text-xs text-gray-400">10:15</span>
          </div>
          <p class="text-xs text-gray-400 mt-1">华东地区网络延迟增加</p>
        </div>
        <div class="mb-3 pb-3 border-b border-gray-700">
          <div class="flex justify-between">
            <span class="text-sm font-medium">支付超时</span>
            <span class="text-xs text-gray-400">10:08</span>
          </div>
          <p class="text-xs text-gray-400 mt-1">12笔订单支付响应超时</p>
        </div>
        <div>
          <div class="flex justify-between">
            <span class="text-sm font-medium">数据库连接数预警</span>
            <span class="text-xs text-gray-400">09:56</span>
          </div>
          <p class="text-xs text-gray-400 mt-1">连接数接近阈值80%</p>
        </div>
      </div>
    </div>

    <div class="module-box">
      <div class="title-bar">
        <span><i class="fa fa-list-ol mr-2 text-secondary"></i>Top 5 产品</span>
      </div>
      <div class="bg-dark/40 rounded p-3">
        <div class="flex items-center mb-4 pb-4 border-b border-gray-700">
          <div class="w-6 h-6 bg-primary rounded-full flex items-center justify-center text-xs mr-3">1</div>
          <div class="flex-1">
            <div class="text-sm">智能手表 Pro</div>
            <div class="text-xs text-gray-400">销量: 12,589</div>
          </div>
          <div class="text-green-400 text-xs"><i class="fa fa-arrow-up"></i> 15.3%</div>
        </div>
        <div class="flex items-center mb-4 pb-4 border-b border-gray-700">
          <div class="w-6 h-6 bg-primary/80 rounded-full flex items-center justify-center text-xs mr-3">2</div>
          <div class="flex-1">
            <div class="text-sm">无线耳机</div>
            <div class="text-xs text-gray-400">销量: 9,876</div>
          </div>
          <div class="text-green-400 text-xs"><i class="fa fa-arrow-up"></i> 8.7%</div>
        </div>
        <div class="flex items-center mb-4 pb-4 border-b border-gray-700">
          <div class="w-6 h-6 bg-primary/60 rounded-full flex items-center justify-center text-xs mr-3">3</div>
          <div class="flex-1">
            <div class="text-sm">智能手机 X</div>
            <div class="text-xs text-gray-400">销量: 7,452</div>
          </div>
          <div class="text-green-400 text-xs"><i class="fa fa-arrow-up"></i> 3.2%</div>
        </div>
        <div class="flex items-center mb-4 pb-4 border-b border-gray-700">
          <div class="w-6 h-6 bg-primary/40 rounded-full flex items-center justify-center text-xs mr-3">4</div>
          <div class="flex-1">
            <div class="text-sm">平板电脑</div>
            <div class="text-xs text-gray-400">销量: 5,123</div>
          </div>
          <div class="text-red-400 text-xs"><i class="fa fa-arrow-down"></i> 2.1%</div>
        </div>
        <div class="flex items-center">
          <div class="w-6 h-6 bg-primary/20 rounded-full flex items-center justify-center text-xs mr-3">5</div>
          <div class="flex-1">
            <div class="text-sm">智能音箱</div>
            <div class="text-xs text-gray-400">销量: 3,897</div>
          </div>
          <div class="text-green-400 text-xs"><i class="fa fa-arrow-up"></i> 6.5%</div>
        </div>
      </div>
    </div>

    <div class="module-box flex-1">
      <div class="title-bar">
        <span><i class="fa fa-users mr-2 text-secondary"></i>用户活跃度</span>
      </div>
      <div class="h-[180px] bg-dark/40 rounded flex items-center justify-center">
        <i class="fa fa-pie-chart text-3xl text-gray-500"></i>
      </div>
    </div>
  </div>
</div>
</div>
</template>

<script setup>
// 布局切换功能
document.getElementById('gridLayout').addEventListener('click', function() {
  document.getElementById('gridLayoutView').classList.remove('hidden');
  document.getElementById('surroundLayoutView').classList.add('hidden');
  document.getElementById('partitionLayoutView').classList.add('hidden');
  document.getElementById('threeColumnLayoutView').classList.add('hidden');

  // 更新按钮样式
  updateActiveButton(this);
});

document.getElementById('surroundLayout').addEventListener('click', function() {
  document.getElementById('gridLayoutView').classList.add('hidden');
  document.getElementById('surroundLayoutView').classList.remove('hidden');
  document.getElementById('partitionLayoutView').classList.add('hidden');
  document.getElementById('threeColumnLayoutView').classList.add('hidden');

  // 更新按钮样式
  updateActiveButton(this);
});

document.getElementById('partitionLayout').addEventListener('click', function() {
  document.getElementById('gridLayoutView').classList.add('hidden');
  document.getElementById('surroundLayoutView').classList.add('hidden');
  document.getElementById('partitionLayoutView').classList.remove('hidden');
  document.getElementById('threeColumnLayoutView').classList.add('hidden');

  // 更新按钮样式
  updateActiveButton(this);
});

document.getElementById('threeColumnLayout').addEventListener('click', function() {
  document.getElementById('gridLayoutView').classList.add('hidden');
  document.getElementById('surroundLayoutView').classList.add('hidden');
  document.getElementById('partitionLayoutView').classList.add('hidden');
  document.getElementById('threeColumnLayoutView').classList.remove('hidden');

  // 更新按钮样式
  updateActiveButton(this);
});

// 更新激活按钮样式
function updateActiveButton(activeBtn) {
  const buttons = document.querySelectorAll('#gridLayout, #surroundLayout, #partitionLayout, #threeColumnLayout');
  buttons.forEach(btn => {
    if (btn === activeBtn) {
      btn.classList.remove('bg-dark-light', 'text-gray-300');
      btn.classList.add('bg-primary', 'text-white');
    } else {
      btn.classList.remove('bg-primary', 'text-white');
      btn.classList.add('bg-dark-light', 'text-gray-300');
    }
  });
}

// 简单的数据动画效果
function animateValue(id, start, end, duration) {
  const obj = document.querySelector(id);
  if (!obj) return;

  let startTimestamp = null;
  const step = (timestamp) => {
    if (!startTimestamp) startTimestamp = timestamp;
    const progress = Math.min((timestamp - startTimestamp) / duration, 1);
    const value = Math.floor(progress * (end - start) + start);
    obj.innerHTML = value.toLocaleString();
    if (progress < 1) {
      window.requestAnimationFrame(step);
    }
  };
  window.requestAnimationFrame(step);
}

// 页面加载完成后执行动画
window.addEventListener('load', function() {
  animateValue('.data-value', 0, 24589, 2000);
});


tailwind.config = {
  theme: {
    extend: {
      colors: {
        primary: '#165DFF',
        secondary: '#0FC6C2',
        accent: '#722ED1',
        dark: '#0F172A',
        'dark-light': '#1E293B'
      },
      fontFamily: {
        sans: ['Inter', 'system-ui', 'sans-serif'],
      },
    },
  }
}
</script>

<style scoped>
@layer utilities {
  .content-auto {
    content-visibility: auto;
  }
  .screen-border {
    border: 1px solid rgba(22, 93, 255, 0.3);
    box-shadow: 0 0 15px rgba(22, 93, 255, 0.2) inset;
  }
  .module-box {
    @apply bg-dark-light/60 rounded-lg p-4 screen-border transition-all duration-300 hover:shadow-lg hover:shadow-primary/20;
  }
  .title-bar {
    @apply text-white text-sm md:text-base font-semibold mb-3 flex items-center justify-between;
  }
  .data-value {
    @apply text-white text-2xl md:text-3xl font-bold;
  }
}
</style>